@import "variable";
.picker {
    @singleHeight: @size * 4 / 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    font-size: @x-big;
    position: absolute;
    transition: background-color 300ms;
    transform: translateX(100%);
    z-index: 2;
    .pnl {
        left: 0;
        bottom: 0;
        width: 100%;
        height: @size + @singleHeight * 7;
        background-color: #fff;
        position: absolute;
        transform: translateY(100%);
        transition: transform 300ms;
        .flexColunm();
        .decorate {
            top: @size + @singleHeight * 3;
            left: 0;
            width: 100%;
            height: @singleHeight;
            .borderTop();
            .borderBottom();
            border-color: @orange;
            position: absolute;
            pointer-events: none;
            background-color: rgba(255,120,0,0.1);
        }
        .top {
            width: 100%;
            height: @size;
            line-height: @size;
            .borderBottom();
            .flexCenter();
            .btn {
                flex: 1;
                height: 100%;
                border: none;
                border-radius: 0;
                &.btn-confirm {
                    color: #fff;
                    background-color: @orange;
                }
                &.btn-cancel {
                    color: #fff;
                    background-color: #ccc;
                }
                &:not(:first-child) {
                    .borderLeft();
                }
            }
        }
        .content {
            width: 100%;
            display: flex;
            .f1();
            .scroll-pnl {
                width: 20%;
                height: @singleHeight * 7;
                overflow: hidden;
                transition: width 300ms;
                .list {
                    position: relative;
                    user-select: none;
                    overflow: hidden;
                    animation: pickerItemShow 300ms;
                    .item {
                        width: 100%;
                        height: @singleHeight;
                        overflow: hidden;
                        line-height: 1;
                        .flexCenter();
                    }
                    
                    @keyframes pickerItemShow {
                        0% {opacity: .3;}
                        100% {opacity: 1;}
                    }
                }
            }
        }
    }
    
}